<script setup>
import bus from "src/utils/eventBus.js";
let prop = defineProps(['msg','eventName'])
const clickEventSituation = (qxcode) => {
    bus.$emit('clickSituationItem',qxcode)
}
</script>

<template>
    <div class="answer-me">
        <div class="answer-icon">
            <img src="../../assets/images/panda.png" alt="">
        </div>
        <div class="me-ques">
            <div class="bg">
                <div class="ti">为您查询出{{prop.eventName}}的事项指南：</div>
                <div class="material-list">
                    <div class="mm" v-for="x in prop.msg" @click="clickEventSituation(x.qxcode)">
                        <span>{{x.qxname}}</span>
                    </div>
                </div>
                <div class="tis">通过选择事项情形可查看事项该情形下需要提交的材料</div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.answer-me{
    display: flex;
    margin-bottom: 10px;
    margin-top: 10px;
    .answer-icon{
        width: 30px;
        height: 30px;
        position: relative;
        top:5px;
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }
    .me-ques{
        background-color: white;
        border-radius: 10px;
        padding: 10px;
        margin-left: 10px;
        letter-spacing: 2px;
        .bg{
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 10px;
        }
        .ti{
            font-weight: bold;
            font-size: 16px;
        }
        .material-list{
            display: flex;
            flex-wrap: wrap;
            .mm{
                padding-top: 10px;
                padding-left: 20px;
                cursor: pointer;
                margin-right: 30px;
                .mm-tit{
                    font-weight: bold;
                }
            }
        }
        .tis{
            padding-top: 10px;
            font-size: 12px;
            color: gainsboro;
            padding-left: 20px;
        }
    }
}

</style>
